<template>
<!--  前端太好玩了  -->
  <div id="app">
     <el-card shadow="always">
         <el-table
                 :data="studenList"
                 style="width: 100%">
             <el-table-column
                     label="学号"
                     align="center"
                     prop="sid"
                     width="180"/>


             <el-table-column
                     label="姓名"
                     prop="sname"
                     align="center"/>


             <el-table-column
                     label="性别"
                     prop="sex"
                     align="center"/>


             <el-table-column
                     label="年龄"
                     prop="age"
                     align="center"/>


             <el-table-column
                     label="住址"
                     prop="addr"
                     align="center"/>



             <el-table-column
                     label="所属班级"
                     prop="cid"
                     align="center"/>






             <el-table-column label="操作" align="center">
                 <template slot-scope="scope">
                     <el-button
                             size="mini"
                             @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                     <el-button
                             size="mini"
                             type="danger"
                             @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                 </template>
             </el-table-column>
         </el-table>
     </el-card>
  </div>
</template>



<script>

import studentApi from "@/api/student";


export default {
    data() {
        return {
            studenList: []
        }
    },

    created() {
        this.findStudents()
    },

    methods: {
        async findStudents(){
            const {data:res} = await studentApi.findAllStudents()
            if(res.code == 200){
                this.studenList = res.data.list
            }
        },
        handleEdit(index, row) {
            console.log(index, row);
        },
        handleDelete(index, row) {
            console.log(index, row);
        }
    }
}
</script>

<style>

#app{
    display: flex;
    justify-content: center;
}

.el-card{
    width: 90%;
}

</style>
